<template>
  <div class="profile">
    <navigation-bar></navigation-bar>
    <el-container>
      <!--    侧边栏-->
      <el-aside width="188px">
        <div class="avatar-info">
          <img :src="avatarUrl" alt="头像">
          <div class="mask" @click="clickAvatar">
            更换头像
          </div>
          <div class="nickName">
            昵称：{{info.ad_uname}}<br>
          </div>
        </div>
        <el-menu
          :default-active="activePath"
          class="el-menu-vertical-demo"
          router>
          <el-menu-item index="/profile/baseInfo">
            <i class="el-icon-menu"></i>
            <span slot="title">基本信息</span>
          </el-menu-item>
          <el-menu-item index="/profile/changeInfo">
            <i class="el-icon-menu"></i>
            <span slot="title">编辑基本信息</span>
          </el-menu-item>
          <el-menu-item index="/profile/changePass">
            <i class="el-icon-menu"></i>
            <span slot="title">修改密码</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <!--    主要内容-->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {mapMutations} from "vuex/dist/vuex.mjs";
import NavigationBar from "@/components/NavigationBar";
import {mapState} from "vuex";

export default {
  name: "Profile",
  components: {NavigationBar},
  methods:{
    clickAvatar(){
      this.openAvatarDialog();
    },
    ...mapMutations(['openAvatarDialog','changeAvatar']),
  },
  data(){
    return{
      info:{}, //登录信息
      activePath: '/profile/baseInfo',
      rank:"普通管理员"
    }
  },
  computed:{
    ...mapState(["avatarUrl"])
  },
  created(){
    this.info = JSON.parse(window.localStorage.getItem("admin"));  //获取info
    if(this.info.ad_image && this.info.ad_image!=''){
      this.changeAvatar(this.info.ad_image);  //更新vuex
    }
    if(this.info.ad_rank==1){
      this.rank = "超级管理员";
    }else{
      this.rank = "普通管理员";
    }
  },
  watch: {
    $route(to, from) {
      this.activePath = to.path;
    },
  }
}
</script>

<style scoped>
.profile{
  height: 100%;
}
.el-container{
  height: calc(100% - 50px);
}
.el-aside{
  display: flex;
  flex-direction: column;
}
.el-menu{
  flex:1;
}
.avatar-info{
  width: 188px;
  border-right: 1px solid #e6e6e6;
  text-align:center;
  padding-bottom: 10px;
  position: relative;
}
.avatar-info img{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 5px 0;
  border: 4px solid #EEE;
  cursor: pointer;
}
.avatar-info img:hover+.mask{
  display: block;
}
.avatar-info .mask{
  font-size: 14px;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top:5px;
  left:50%;
  transform: translateX(-50%);
  color: white;
  background: rgba(0,0,0,0.5);
  border: 4px solid #EEE;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  display:none;
}
</style>
